<template>
	<view class="addlifepay">
		<view class="addlifepay-title">
			<view class="left">
				<view class="title-Img">

				</view>
				<view class="title-name">
					电费
				</view>
			</view>
			<view class="right">
				<text style="color: #006eff;margin-right: 15rpx;">广州市</text>
				<text style="color: #cdcdcd;">◢</text>
			</view>
		</view>
		<view class="addlifepay-content">
			<view class="content-title">
				请输入缴费账户信息
			</view>
			<view class="userinput">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="">
						<text class="" style="margin-right: 40rpx;">
							缴费单位
						</text>
						<text class="selectpay" @click="goselecepay">
							请选择缴费单位
						</text>
					</view>
					<view class="">
						<image src="../../../../static/icons/右箭头 (1).png" mode="" style="width: 30rpx;height: 30rpx;">
						</image>
					</view>
				</view>
			</view>
			<view class="userinput">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="" style="display: flex;">
						<text class="" style="margin-right: 50rpx;">
							缴费单位
						</text>
						<input type="text" placeholder="请输入缴费户号" class="selectpay" />
					</view>
					<view class="right">
						如何获取户号？
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<label>
				<checkbox :value="11" /><text>我已阅读并同意</text>
			</label>
			<text style="color:#006eff;">《电费缴纳服务协议》</text>
			<button class="footer-Btn" @click="goPay">下一步</button>
		</view>
	</view>
</template>

<script setup>
	const goPay = () => {
		uni.navigateTo({
			url: "/pages/server/views/CtrCity/CtrCity"
		})
	}
	const goselecepay = () => {
		uni.navigateTo({
			url: '/pages/server/views/SelectPay/SelectPay'
		})
	}
</script>

<style lang="scss">
	.addlifepay {
		height: calc(100vh - 60rpx);
		background-color: #fcfcfc;
		padding: 30rpx;

		.footer {
			font-size: 26rpx;
			margin-top: 80rpx;

			.footer-Btn {
				margin-top: 30rpx;
				background-color: #006eff;
				color: white;
				font-size: 30rpx;
			}
		}

		.addlifepay-content {
			.userinput {
				border-bottom: 2rpx solid #f2f2f2;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;

				.selectpay {
					color: #808080;
					font-size: 26rpx;
				}

				.right {
					font-size: 25rpx;
					color: #006eff;
				}
			}

			.content-title {
				color: #9a9a9a;
				font-size: 26rpx;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #f2f2f2;
				margin-bottom: 30rpx;
			}
		}

		.addlifepay-title {
			padding: 30rpx;
			background-color: #f4f7fc;
			border-radius: 12rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 80rpx;

			.left {
				display: flex;
				align-items: center;

				.title-Img {
					width: 64rpx;
					height: 64rpx;
					background-color: #dceafc;
					border-radius: 50%;
					margin-right: 15rpx;
				}
			}

			.right {
				font-size: 26rpx;
			}
		}
	}
</style>